<template>
<div class="login-template">
  <div class="header" style="padding: 0;">
    <h2 style="color: white;width: 400px;height: 60px;line-height: 60px; margin: 0 0 0 30px; padding: 0;">
    学生信息管理系统
    </h2>
  </div>

  <div class="loginWraper">
    <div id="loginform" class="loginform box">
    <form action="" method="post" style="margin-left:110px;">
      <table>
        <tr>
          <td><h1>Login/Register</h1></td>
        </tr>
        <tr>
          <td>账 户:
          <input class="kuang" name="accout" type="text" /></td>
        </tr>
        <tr>
          <td>密 码:
          <input class="kuang" name="password" type="password" /></td>
        </tr>
        <tr>
          <td>
            <input class="kuang" name="vcode" type="text" placeholder="请输入验证码:" style="width: 100px;">
            <img title="#" id="vcodeImg" src="https://localhost:9998/Capcha/getCapcha">
          </td>
        </tr>
        <tr>
          <td>
          <div style="text-align: center;">
            <span>
              <input type="radio" id="radio-1" name="type" checked value="1" />
              <label for="radio-1">学生</label>
            </span>
            <span>
              <input type="radio" id="radio-2" name="type" value="2" />
              <label for="radio-2">老师</label>
            </span>
            <span>
              <input type="radio" id="radio-9" name="type" value="9" />
              <label for="radio-9">管理员</label>
            </span>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="login-button">Login
            <input type="submit" />
            </div>
          </td>
        </tr>

      </table>
    </form>
    </div>
  </div>

  <div class="footer">Copyright&nbsp;</div>
</div>
</template>

<script>
export default{
  name: 'loginMy',
  data () {

  }
}
</script>

<style>
.login-template{
  margin: 0;
  padding: 0;
}
.box{
    background: rgba( 255, 255, 255, 0.60 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 0.0px );
    -webkit-backdrop-filter: blur( 1.0px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.header{
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  background-color: rgba(255,192,203,0.90);
  z-index: 99;
}

.loginWraper{
  width: 100%;
  background-color:pink;
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 60px;
  right: 0;
  z-index: 2;
}
.loginform{
  width: 500px;
  height: 340px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -170px;
}
.kuang{
    width: 230px;
    margin: 10px 0;
    outline: none;
    border: 0;
    padding: 6px;
    border-bottom: 3px solid rgb(80,80,170);
    font: 900 16px '';
}
.login-button{
    margin: 20px;
    bottom: 40px;
    display: block;
    width: 250px;
    height: 40px;
    font: 900 25px '';
    text-decoration: none;
    line-height: 35px;
    border-radius: 30px;
    background-image: linear-gradient(to left,
    #9c88ff,#3cadeb);
    text-align: center;
}

.footer{
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: absolute;
  bottom: 0;
  color: white;
  background-color: rgba(255,192,203,0.80);
    z-index: 6;
  }
</style>
